<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta keywords="">
    <meta description="">
    <link href="/resources/css/common/reset.css" rel="stylesheet">
    <link href="/resources/css/common/common.css" rel="stylesheet">
    <link href="/resources/dep/ECar/modal/css/ECar.modal.css" rel="stylesheet">
    <link href="/resources/css/orderinfo/orderinfo.css" rel="stylesheet">
    <title>订单信息333331111</title>
  </head>
  <body>
    <!--顶部步奏菜单-->
    <div class="step_box">
      <div class="cross"></div>
      <div class="nav clearfix">
        <div class="myShopping line active">
          <div class="num">1</div><span>我的购物车</span>
          <div class="step_arrow"></div>
        </div>
        <div class="orderInfo line">
          <div class="num">2</div><span>订单信息</span>
          <div class="step_arrow"></div>
        </div>
        <div class="payOrder line">
          <div class="num">3</div><span>支付订单</span>
        </div>
      </div>
    </div>
    <!--订单标题-->
    <div class="orderinfo_title">填写并核对订单信息</div>
    <div class="orderinfo_box">
      <!--收件人地址-->
      <!--地址Created by cacalot123 on 2016/4/18.
      -->
      <div class="user_address">
        <div class="user_address_hd">
          <h3>收件人信息</h3><a href="#" class="add_address">新增收货地址</a>
        </div>
        <div id="userAddressList" class="user_address_bd">
          <ul>
            <li>
              <label class="address_tips"><span class="add_name">黄芳</span><span class="add_city">上海</span></label>
              <div class="address_detailed"><span class="address_name">黄芳</span><span class="address_city">上海  长宁区</span><span class="address_info">华山路1568号8楼</span><span class="address_tel">15835465259</span></div>
              <div class="handle"><span class="default_address">设为默认地址</span><span class="edit">编辑</span><span class="del">删除</span></div>
            </li>
            <li>
              <label class="address_tips"><span class="add_name">黄芳</span><span class="add_city">上海</span></label>
              <div class="address_detailed"><span class="address_name">黄芳</span><span class="address_city">上海  长宁区</span><span class="address_info">华山路1568号8楼</span><span class="address_tel">15835465259</span></div>
              <div class="handle"><span class="default_address">设为默认地址</span><span class="edit">编辑</span><span class="del">删除</span></div>
            </li>
            <li class="active">
              <label class="address_tips"><span class="add_name">黄芳</span><span class="add_city">上海</span></label>
              <div class="address_detailed"><span class="address_name">黄芳</span><span class="address_city">上海  长宁区</span><span class="address_info">华山路1568号8楼</span><span class="address_tel">15835465259</span></div>
              <div class="handle"><span class="default_address">设为默认地址</span><span class="edit">编辑</span><span class="del">删除</span></div>
            </li>
            <li>
              <label class="address_tips"><span class="add_name">黄芳</span><span class="add_city">上海</span></label>
              <div class="address_detailed"><span class="address_name">黄芳</span><span class="address_city">上海  长宁区</span><span class="address_info">华山路1568号8楼</span><span class="address_tel">15835465259</span></div>
              <div class="handle"><span class="default_address">设为默认地址</span><span class="edit">编辑</span><span class="del">删除</span></div>
            </li>
            <li>
              <label class="address_tips"><span class="add_name">黄芳</span><span class="add_city">上海</span></label>
              <div class="address_detailed"><span class="address_name">黄芳</span><span class="address_city">上海  长宁区</span><span class="address_info">华山路1568号8楼</span><span class="address_tel">15835465259</span></div>
              <div class="handle"><span class="default_address">设为默认地址</span><span class="edit">编辑</span><span class="del">删除</span></div>
            </li>
            <li>
              <label class="address_tips"><span class="add_name">黄芳</span><span class="add_city">上海</span></label>
              <div class="address_detailed"><span class="address_name">黄芳</span><span class="address_city">上海  长宁区</span><span class="address_info">华山路1568号8楼</span><span class="address_tel">15835465259</span></div>
              <div class="handle"><span class="default_address">设为默认地址</span><span class="edit">编辑</span><span class="del">删除</span></div>
            </li>
          </ul>
        </div>
        <div id="hideAddress" class="hide_address"><span>更多地址</span><i class="close"></i></div>
      </div>
      <div class="user_address no_address">
        <div class="user_address_hd">
          <h3>收件人信息</h3><a href="#" class="add_address">新增收货地址</a>
        </div>
        <div class="user_address_bd">未添加收货人信息</div>
      </div>
      <!--订单信息-->
      <ul class="detailinfoUl">
        <li class="detailinfoLi">
          <div class="detailinfoLiTitle">车享自营</div>
          <div class="detailinfoContainer">
            <div class="detailinfoLeft">
              <ul class="distributionTitle">
                <li><span class="distributionMethod">配送方式</span></li>
                <li class="pdl10"><i class="icon icon-radio"></i><span class="distributionContent">快递运输</span></li>
                <li class="pdl10"><span class="distributionInfo">温馨提示：由商家合作快递为您配送			</span></li>
              </ul>
            </div>
            <div class="detailinfoRight">
              <ul class="detailinfoArticleUl">
                <li class="detailinfoArticleLi middle">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"><i class="jdone-icon"></i></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
              </ul>
              <div class="detailinfoFreight">运费<span class="detailinfoFreightValue">0</span>元</div>
            </div>
          </div>
        </li>
        <li class="detailinfoLi">
          <div class="detailinfoLiTitle">车享自营</div>
          <div class="detailinfoContainer">
            <div class="detailinfoLeft">
              <ul class="distributionTitle">
                <li><span class="distributionMethod">配送方式</span></li>
                <li class="pdl10"><i class="icon icon-radio"></i><span class="distributionContent">快递运输</span></li>
                <li class="pdl10"><span class="distributionInfo">温馨提示：由商家合作快递为您配送</span></li>
              </ul>
            </div>
            <div class="detailinfoRight">
              <ul class="detailinfoArticleUl merge_UL">
                <li class="detailinfoArticleLi list_line">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi list_line">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi list_line">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi list_line">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi merge_pay">
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
              </ul>
              <div class="detailinfoFreight">运费<span class="detailinfoFreightValue">0</span>元</div>
            </div>
          </div>
        </li>
        <li class="detailinfoLi">
          <div class="detailinfoLiTitle">大众旗舰店</div>
          <div class="detailinfoContainer">
            <div class="detailinfoLeft">
              <ul class="distributionTitle">
                <li><span class="distributionMethod">配送方式</span></li>
                <li class="pdl10"><i class="icon icon-radio"></i><span class="distributionContent">上门自理</span></li>
                <li class="pdl10"><span class="distributionInfo">手机号码
                    <input type="text" maxlength="11" class="cellphoneNo j_cellphoneNo"></span>
                  <div class="distributionInfoError j_distributionInfoError"><i class="icon icon-error"></i><span>手机号码不能为空</span></div>
                </li>
                <li class="pdl75"><span class="distributionInfo">(短信接收券码)</span></li>
              </ul>
            </div>
            <div class="detailinfoRight">
              <ul class="detailinfoArticleUl">
                <li class="detailinfoArticleLi middle">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
              </ul>
              <div class="detailinfoFreight">运费<span class="detailinfoFreightValue">0</span>元</div>
            </div>
          </div>
        </li>
        <li class="detailinfoLi">
          <div class="detailinfoLiTitle">京东</div>
          <div class="detailinfoContainer">
            <div class="detailinfoLeft">
              <ul class="distributionTitle">
                <li><span class="distributionMethod">配送方式</span></li>
                <li class="pdl10"><i class="icon icon-radio"></i><span class="distributionContent">快递运输</span></li>
                <li class="pdl10 twoLine">
                  <div class="distributionInfoLeft distributionInfo">运费：</div>
                  <div class="distributionInfoRight">
                    <div class="distributionInfo">店铺单笔订单不满69元，</div>
                    <div class="distributionInfo">在线支付运费5元。</div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="detailinfoRight">
              <ul class="detailinfoArticleUl">
                <li class="detailinfoArticleLi middle">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
                <li class="detailinfoArticleLi">
                  <div class="detailinfoArticleImg"><img src="http://dummyimage.com/120/000"></div>
                  <div class="detailinfoArticleDesc">
                    <div class="detailinfoArticleDescTitle">Clinique倩碧水磁场眼霜 眼部护理水凝霜保淡化细纹黑眼圈</div>
                    <div class="detailinfoArticleDescColor">颜色分类：青色</div>
                    <div class="detailinfoArticleDescSize">尺码：XL</div>
                  </div>
                  <div class="detailinfoArticlePrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                  <div class="detailinfoArticleQuan">x<span>1</span></div>
                  <div class="detailinfoArticleCalcPrice">
                    <div>2000.00元</div>
                    <div>+</div>
                    <div>1000积分</div>
                  </div>
                </li>
              </ul>
              <div class="detailinfoFreight">运费<span class="detailinfoFreightValue">0</span>元</div>
            </div>
          </div>
        </li>
      </ul>
      <!--发票-->
      <div class="invoiceSection">
        <div class="invoiceInnerSection">
          <div class="invoiceTitle">发票信息</div>
          <ul class="invoiceSelectUl">
            <li class="invoiceSelectLi j_invoiceLi1">
              <label for="invoiceSelectId1"><i class="icon icon-radio checked"></i></label>
              <input id="invoiceSelectId1" name="invoiceSelectName" type="radio" checked="checked" class="invoiceSelect"><span class="invoiceSelectContent">不需要发票</span>
            </li>
            <li class="invoiceSelectLi j_invoiceLi2">
              <label for="invoiceSelectId2"><i class="icon icon-radio"></i></label>
              <input id="invoiceSelectId2" name="invoiceSelectName" type="radio" class="invoiceSelect"><span class="invoiceSelectContent">需要发票</span>
            </li>
          </ul>
          <ul class="invoiceContentUl j_invoiceContentUl">
            <li class="invoiceContentLi">
              <div class="invoiceContentLeft">发票</div>
              <div class="invoiceContentRight"><span class="invoiceContentDesc">仅现金部分可开票，发票将在发货后的30天寄送</span></div>
            </li>
            <li class="invoiceContentLi">
              <div class="invoiceContentLeft">发票抬头</div>
              <div class="invoiceContentRight">
                <div class="invoiceContentPos">
                  <select>
                    <option>单位</option>
                    <option>单位</option>
                    <option>单位</option>
                  </select>
                  <input type="text" placeholder="单位名称" class="j_invoiceContentInput">
                  <div class="invoiceContentPosError j_invoiceContentPosError"><i class="icon icon-error"></i><span>单位名称不能为空</span></div>
                </div>
              </div>
            </li>
            <li class="invoiceContentLi">
              <div class="invoiceContentLeft">发票明细</div>
              <div class="invoiceContentRight">
                <div class="invoiceContentDetail">
                  <select>
                    <option>明细</option>
                    <option>明细</option>
                    <option>明细</option>
                  </select>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--总览-->
    <div class="overview">
      <div class="overview_box">
        <ul class="line">
          <li>
            <label><span class="total_number">20件商品</span>总商品金额</label>
            <div class="rightcontent"><span class="cols1"><ins>4000.00</ins>元</span><span class="cols2">+</span><span class="cols3"><ins>200</ins>积分</span></div>
          </li>
          <li>
            <label>运费</label>
            <div class="rightcontent"><span class="cols1"><ins>0</ins>元</span></div>
          </li>
        </ul>
        <ul>
          <li>
            <label>已优惠</label>
            <div class="rightcontent"><span class="cols1"><ins>-80</ins>元</span></div>
          </li>
          <li>
            <label class="paytotal">需支付</label>
            <div class="rightcontent"><span class="cols4"><ins>4000.00</ins>元</span><span class="cols2">+</span><span class="cols5"><ins>2000</ins>积分</span></div>
          </li>
        </ul>
      </div><a href="#" class="submit_detail">提交订单</a><a href="#" class="backto_cart">返回修改购物车</a>
    </div>
    <!--弹层-->
    <!-- Created by cacalot123 on 2016/4/18.-->
    <input type="button" value="支付成功" class="button1">
    <input type="button" value="积分扣款失败" class="button2">
    <input type="button" value="积分余额不足" class="button3">
    <div id="consigneeInfoContainer" style="display:none">
      <div class="consigneeInfoContainer">
        <div id="consigneeInfoName" class="consigneeInfoRow">
          <div class="consigneeInfoColumnLeft"><span class="asterisk">*</span><span class="consigneeInfoDesc">收货人：</span></div>
          <div class="consigneeInfoColumnRight">
            <input type="text" value="1" class="person"><span class="consigneeInfoErrorSpan"><i class="ECar_icon_warn consigneeInfoIcon"></i><span class="consigneeInfoWarning">收货人不能为空</span></span>
          </div>
        </div>
        <div id="consigneeInfoCity" class="consigneeInfoRow">
          <div class="consigneeInfoColumnLeft"><span class="asterisk">*</span><span class="consigneeInfoDesc">所在地区：</span></div>
          <div class="consigneeInfoColumnRight">
            <select class="district">
              <option value="上海长宁区城区">上海长宁区城区</option>
              <option value="上海长宁区城区">上海长宁区城区</option>
              <option value="上海长宁区城区">上海长宁区城区</option>
            </select><span class="consigneeInfoErrorSpan"><i class="ECar_icon_warn consigneeInfoIcon"></i><span class="consigneeInfoWarning"></span></span>
          </div>
        </div>
        <div id="consigneeInfoAddress" class="consigneeInfoRow">
          <div class="consigneeInfoColumnLeft"><span class="asterisk">*</span><span class="consigneeInfoDesc">详细地址：</span></div>
          <div class="consigneeInfoColumnRight">
            <input type="text" class="address"><span class="consigneeInfoErrorSpan"><i class="ECar_icon_warn consigneeInfoIcon"></i><span class="consigneeInfoWarning">地址不能为空</span></span>
          </div>
        </div>
        <div id="consigneeInfoPhone" class="consigneeInfoRow">
          <div class="consigneeInfoColumnLeft"><span class="asterisk">*</span><span class="consigneeInfoDesc">手机号码：</span></div>
          <div class="consigneeInfoColumnRight">
            <input type="text" class="phoneNo"><span class="consigneeInfoErrorSpan"><i class="ECar_icon_warn consigneeInfoIcon"></i><span class="consigneeInfoWarning">手机号码格式不正确</span></span>
          </div>
        </div>
        <div class="ECar_modal_button">
          <button class="consigneeInfoBtn">保存收货人信息</button>
        </div>
      </div>
    </div>
    <div id="intergralSuccess" style="display:none">
      <div class="layer_content state_layer"><i class="layer_icon icon_success"></i>
        <p class="main_txt f-18">积分支付成功，您还需支付<span class="clr-red">400</span>元</p><span class="added_tips">将在<span class="clr-red">2秒内</span>跳转至支付页面</span>
      </div>
    </div>
    <div id="intergralfail1" style="display:none">
      <div class="layer_content state_layer"><i class="layer_icon icon_fail"></i>
        <p class="main_txt f-20">积分扣取失败！</p><span class="added_tips"><a href="#" class="link_btn">继续支付</a><a href="#" class="link_txt">继续购物</a></span>
      </div>
    </div>
    <div id="intergralfail2" style="display:none">
      <div class="layer_content state_layer"><i class="layer_icon icon_fail"></i>
        <p class="main_txt f-20">积分余额不足！</p><span class="added_tips"><a href="#" class="link_btn">继续支付</a><a href="#" class="link_txt">赚取积分</a></span>
      </div>
    </div>
    <script src="http://s1.cximg.com/cxlib/assets/js/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="/resources/dep/ECar/modal/ECar.modal.js" type="text/javascript"></script>
    <script src="/resources/dep/ECar/ECar.reg-1.0.min.js" type="text/javascript"></script>
    <script src="/resources/js/orderinfo.js" type="text/javascript"></script>
    <script>
      $(function () {
          $(".button1").on("click", function () {
              ECar.modal.otherTemplate({
                  width: 525,
                  height: 205,
                  title: "通知",
                  maskAlpha: "1",
                  template:$("#intergralSuccess").html()
              });
          })
          $(".button2").on("click", function () {
              ECar.modal.otherTemplate({
                  width: 525,
                  height: 205,
                  title: "通知",
                  maskAlpha: "1",
                  template:$("#intergralfail1").html()
              });
          })
          $(".button3").on("click", function () {
              ECar.modal.otherTemplate({
                  width: 525,
                  height: 205,
                  title: "通知",
                  maskAlpha: "1",
                  template:$("#intergralfail2").html()
              });
          })
      })
    </script>
  </body>
</html>